<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>JIM管理系统</title>
<%@ include file="../../../inc/main-css.jsp"%>
<%@ include file="../../../inc/main-js.jsp"%>
<style type="text/css">
	.table th, .table td { 
	text-align: center;
	vertical-align: middle!important;
	}
</style>
<script type="text/javascript">
	$(function(){
		$('#table').bootstrapTable({
			url:'list',
			showColumns:true,
			pagination:true,
			sidePagination:'server',
			pageList:[10, 25, 50, 100],
			clickToSelect:true,
			onDblClickRow:function(row, $element){
				showEdit(row);
			},
		    columns: [
		    {
		        checkbox:true
		    },{
		        field: 'id',
		        title: 'id',
		    }, {
		        field: 'name',
		        title: '名称'
		    }, {
		        field: 'loginid',
		        title: '账号'
		    },{
		    	field: 'flag',
				title: '是否启用',
				formatter:function(value,row,index){
					
					if(row.flag==1){
						return "启用";
					}else{
						return "不启用";
					}
				}
		    },{
		        field: 'createtime',
		        title: '创建时间'
		    }]
		});
		
		$('#roleTable').bootstrapTable({
			url:'../role/list',
			pagination:true,
			sidePagination:'server',
			clickToSelect:true,
			pageList:[10, 25, 50, 100],
		    columns: [
		    {
		        checkbox:true
		    }, {
		        field: 'rolename',
		        title: '角色名称'
		    }, {
		        field: 'roleno',
		        title: '角色代码'
		    }]
		});
		
		$("#add").click(function(){
			$("#myModal").modal("show");
			$("#passwordDiv").show();
			$("#saveBtn").show();
			$("#updateBtn").hide();
			$("#inputLoginid").attr("disabled",false);
			//清空表单
			$('#operatorForm')[0].reset();
			
			$("#roleTable").bootstrapTable("uncheckAll");
		});
		
		$("#saveBtn").click(function (){
			if(isExist($("#inputLoginid").val())){
				alert("该账号已经存在！");
				return;	
			}
			
			var flag=0;
			
			if($("#checkboxFlag").prop("checked")){
				flag = 1;
			}
			
			var selections = $("#roleTable").bootstrapTable("getSelections");
			
			$.ajax({
				url:"save",
				type:"post",
				dataType:"json",
				data:{
					"loginid":$("#inputLoginid").val(),
					"name":$("#inputName").val(),
					"password":$("#inputPassword").val(),
					"flag":flag,
					"roleSelectionsJson":JSON.stringify(selections)
				},
				success:function(data){
					if(data){
						alert("添加成功。");
					}else{
						alert("添加失败。");
					}
					
					$("#myModal").modal("hide");
					
					$('#table').bootstrapTable('refresh');
				}
				
			});
		});
		
		$("#update").click(function(){
			
			var $selectedObj = $("#table").bootstrapTable("getSelections")[0];
			
			showEdit($selectedObj);
		});
		
		$("#updateBtn").click(function(){
		
			var flag=0;
			
			if($("#checkboxFlag").prop("checked")){
				flag = 1;
			}
			
			var selections = $("#roleTable").bootstrapTable("getSelections");
			$.ajax({
				url:"update",
				type:"post",
				dataType:"json",
				data:{
					"id":$("#id").val(),
					"loginid":$("#inputLoginid").val(),
					"name":$("#inputName").val(),
					"flag":flag,
					"roleSelectionsJson":JSON.stringify(selections)
				},
				success:function(data){
					if(data){
						alert("更新成功");
					}else{
						alert("更新失败");
					}
					$("#table").bootstrapTable("refresh");
				}
			});
		});
		
		
		isExist = function(loginid){
			var exist = false;
			$.ajax({
				url:"isExist",
				type:"post",
				dataType:"json",
				async:false,
				data:{"loginid":loginid},
				success:function(data){
					exist = data;
				}
			});
			return exist;
		}
		
		
		$("#deleteRec").click(function(){
			var $selectedObjs = $("#table").bootstrapTable("getSelections");
			
			if($selectedObjs.length>0){
				
				if(!confirm("确定要删除选中的"+$selectedObjs.length+"项？")){
					return;
				}
				
				var idsArr=[];
				$.each($selectedObjs,function(i){
					idsArr[i] = this.id;
				});
				
				$.ajax({
					url:"delete",
					type:"post",
					dataType:"json",
					traditional: true,
					data:{"idsArr":idsArr},
					success:function(data){
						alert("删除成功");
						
						$("#table").bootstrapTable("refresh");
					}
				});
				
			}else{
				alert("请至少选择一条记录！");
			}
		});
		
		initRoleTableSelection = function(loginid){
		
			$("#roleTable").bootstrapTable("uncheckAll");
			$.ajax({
				url:"getRoleListByLoginid",
				dataType:"json",
				type:"post",
				data:{"loginid":loginid},
				success:function(data){
					if(data){
						var roleArr = [];
						
						$.each(data,function(i){
							roleArr[i] = this.roleno;
						});
						
						$("#roleTable").bootstrapTable("checkBy",{field:"roleno", values:roleArr});
						
					}
				}
			});
		}
		
		showEdit = function($selectedObj){
			if($selectedObj){
				$("#myModal").modal("show");
				$("#passwordDiv").hide();
				$("#saveBtn").hide();
				$("#updateBtn").show();
				$("#inputLoginid").val($selectedObj.loginid);
				$("#inputName").val($selectedObj.name);
				$("#id").val($selectedObj.id);
				if($selectedObj.flag==1){
					$("#checkboxFlag").prop("checked",true);
				}else{
					$("#checkboxFlag").prop("checked",false);
				}
				
				$("#inputLoginid").attr("disabled",true);
				
				initRoleTableSelection($selectedObj.loginid);
			}else{
				alert("请选择一行记录");
			}
		}
		
		search = function(){
		
			var fieldSel = $("#field").val();
			var fieldValInp = $("#fieldVal").val();
		
			$("#table").bootstrapTable("refresh",{
				query:{field:$.trim(fieldSel),fieldVal:$.trim(fieldValInp)}
			});
		}
	});//--
	
</script>
</head>
<body>
	<div id="wrapper" class="container-fluid">
		<%@ include file="../../../inc/menu.jsp"%>
		
		<div id="page-wrapper">
		
			<div class="container-fluid" style="height: 100%">
				
				<form class="form-inline">
				<div class="btn-group" role="group" aria-label="...">
					  <button type="button" class="btn btn-default" id="add">添加</button>
					  <button type="button" class="btn btn-default" id="update">修改</button>
					  <button type="button" class="btn btn-default" id="deleteRec">删除</button>
					</div>
				
				  <div class="form-group" style="padding-top:5px;">
				    <label for="fieldVal">
				    	<select class="form-control" id="field">
				    		<option value="">所有</option>
				    		<option value="loginid">账号</option>
				    		<option value="name">名称</option>
				    	</select>
				    </label>
				    <div class="input-group" style="m">
				    	<input type="text" class="form-control" id="fieldVal">
				  	<span class="input-group-addon btn btn-primary" onclick="search();">搜索</span>
				    </div>
				    
				  </div>
				</form>
				<table id="table" class="table"></table>
			</div>
			<!-- /.container-fluid -->
		</div>
	</div>
	


		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">操作员管理</h4>
		      </div>
		      <div class="modal-body">
		        <form class="form-horizontal" id="operatorForm">
		        <input type="hidden" id="id" />
				  <div class="form-group">
				    <label for="inputLoginid" class="col-sm-2 control-label">账号</label>
				    <div class="col-sm-10">
				      <input type="input" class="form-control" id="inputLoginid" name="loginid" placeholder="账号">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputName" class="col-sm-2 control-label">名称</label>
				    <div class="col-sm-10">
				      <input type="name" class="form-control" id="inputName" placeholder="名称">
				    </div>
				  </div>
				  <div class="form-group" id="passwordDiv">
				    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
				    <div class="col-sm-10">
				      <input type="password" class="form-control" id="inputPassword" placeholder="密码">
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <div class="checkbox">
				        <label>
				          <input type="checkbox" name="flag" id="checkboxFlag"> 是否启用
				        </label>
				      </div>
				    </div>
				  </div>
				  	<table id="roleTable" class="table"></table>
				</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
		        <button type="button" class="btn btn-primary" id="updateBtn" style="display: none;">更新</button>
		      </div>
		    </div>
		  </div>
		</div>
</body>

</html>